import React, { useEffect, useState } from 'react'
import { NavBar,Space } from 'antd-mobile'
import { MoreOutline } from 'antd-mobile-icons'
import { useLocation, useNavigate } from 'react-router-dom'
import { CartO, ChatO, Star } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
import './detail.css'
import { DETAIL,ADD, CarList } from '../../axios'
import Swipers from '../../components/Swiper'
import { useSelector } from 'react-redux';
export default function Detail() {
  let {userId} = useSelector(state => state.user)
  // console.log(userId);
  let location = useLocation()
  let [ data,setData ] = useState({})
  let [ sum,setSum ] = useState('')
  useEffect(() => {
    let id = location.pathname.split('/').pop()
    DETAIL(id).then(res => {
      // console.log(res);
      setData(res.data)
    })
    CarList({userid:userId}).then(res => {
      console.log(res);
      setSum(res.data.code !='10020' ? res.data.data.length:'')
    })
  },[])
  let navigate = useNavigate()
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        <MoreOutline />
      </Space>
    </div>
  )
    const add = () => {
      let id = location.pathname.split('/').pop()
      console.log(111);
      ADD({proid:id,userid:userId,num:'1'}).then(res => {
        console.log(res);
      })
      CarList({userid:userId}).then(res => {
        console.log(res);
        setSum(res.data.code !='10020' ? res.data.data.length:'')
      })
    }
  
  return (
    <>
    { data.code === '200' && <div className='detail-box'>
        <NavBar right={right} left='返回' onBack={() => navigate(-1)} className='detail-top'>
          详情
        </NavBar>
        <Swipers banner={data.data.banners[0].split(',')}></Swipers>

        <div className='detail-price'>￥<span>{data.data.originprice}</span></div>
        <div className='detail-title'>
            <span>自营</span>{data.data.proname}
        </div>
        <div className='demo-action-bar'>
          <ActionBar>
            <ActionBar.Icon icon={<CartO color='red' />} badge={{ content: sum }} text='购物车' onClick={() =>navigate('/car') } />
            <ActionBar.Button type='warning' onClick={add} text='加入购物车' />
            <ActionBar.Button type='danger' text='立即购买' />
          </ActionBar>
      </div>
    </div>}
    </>
  )
}
